<script setup>
import { ref, reactive, onMounted, onUnmounted, watch, computed, h } from "vue";
// 工具函数
import { millisToHoursMinutesSeconds } from "../../../utools/index.js";
import { LoadingOutlined } from "@ant-design/icons-vue";
import utils from "@/common/utils/utils";
import { message } from "ant-design-vue";
const props = defineProps({
  item: {
    type: Object,
    default() {
      return {};
    },
  },
  // 是否是展示更多选项
  viewMore: {
    type: Boolean,
    default() {
      return false;
    },
  },
  // 展示更多的列表
  moreList: {
    type: Array,
    default() {
      return [];
    },
  },
});

const emit = defineEmits(["delItem:data", "toView:data", "repaint"]);
// 控制气泡显示
const popVisible = ref(false);

// 判断是不是ai图片
const isAI = computed(() => {
  // 有链接, 并且没有描述
  //  && !props.item.scene_des
  return props.item.material_url;
});
// 自定义loding 图标
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: "24px",
  },
  spin: true,
});

// 查看
const toView = (item) => {
  // debugger
  popVisible.value = false;
  // 如果 素材加载失败 则 不允许进行查看
  if (!imgOk.value || !videoShow.value) {
    return message.error('素材加载失败,请移除或重新添加')
  }
  emit("toView", item);
};

// 重绘
const repaint = () => {
  popVisible.value = false;
  emit("repaint", props.item);
};

// 删除某项
const delItem = (item) => {
  emit("delItem", item);
};

const imgOk = ref(true)
// 图片加载失败
const imgErr = (e) => {
  console.log("图片加载失败", e);
  utils.imgError(e)
  // 图片素材加载失败
  imgOk.value = false
}


// 控制 视频加载失败之后 显示图片的开关
const videoShow = ref(true)
// 视频加载失败事件
const videoErr = (e) => {
  console.log(e, '视频加载失败');
  // 视频加载失败
  videoShow.value = false
}
</script>

<template>
  <template v-if="!props.viewMore">
    <div class="item_card">
      <!-- 头部遮罩 - 显示名称 -->
      <a-tooltip>
        <template #title>{{ props.item.material_name }}</template>
        <div class="top_marsk mask_common" v-if="isAI && !props.viewMore">
          <div class="item_name">{{ props.item.material_name }}</div>
        </div>
      </a-tooltip>
      <!-- 图片分类 -->
      <template v-if="props.item.scene_type == 'image'">
        <!-- 不是ai图片 -->
        <template v-if="isAI">
          <!-- @error="imgErr" -->
          <img
            style="object-fit: cover; width: 100%; height: 100%"
            :src="props.item.material_url"
            alt=""
            @error="imgErr"
          />
        </template>

        <!-- ai 图片 -->
        <template v-else>
          <!-- ai图片 -->
          <div class="formation">
            <a-spin
              :spinning="props.item?.creatLoading || false"
              :indicator="indicator"
              tip="生成素材中"
              class="spin_content"
            >
              <!-- 生成中 -->
              <div
                style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <img
                  style="object-fit: cover; width: 100%"
                  v-if="props.item.material_url != ''"
                  :src="props.item.material_url"
                  alt=""
                />
                <!-- 生成失败 -->
                <div
                  v-else-if="!props.item?.creatLoading"
                  style="height: 100%; width: 100%; padding-top: 44px"
                >
                  <p style="text-align: center; color: var(--ss-primary-color)">
                    生成失败!
                  </p>
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      margin-top: 20px;
                      gap: 15px;
                    "
                  >
                    <a-button
                      style="width: 28px; padding: 0; margin-left: 4px"
                      type="link"
                      @click="repaint"
                      >重绘</a-button
                    >
                    <a-popconfirm
                      title="确定删除吗?"
                      ok-text="确定"
                      cancel-text="取消"
                      @confirm="delItem(props.item)"
                    >
                      <a-button
                        style="width: 28px; padding: 0; margin-right: 4px"
                        type="link"
                        @click="() => {}"
                        >删除</a-button
                      >
                    </a-popconfirm>
                  </div>
                </div>
              </div>
            </a-spin>
          </div>
        </template>
      </template>
      <template v-else-if="props.item.scene_type == 'video'">
        <img @error="imgErr" v-if="item.thumb_url" :src="item.thumb_url" alt=""  style="height: 100%; width: 100%">
        <video
       v-else-if="videoShow"
          style="height: 100%; width: 100%"
          :src="item.material_url"
          @error="videoErr"
        >
      </video>
      <img
      v-else
          style="object-fit: cover; width: 100%; height: 100%"
          :src="utils.errorImgSrc"
          alt=""
        />
      </template>

      <!-- 示例素材文本提示 -->
      <div class="sample_material" v-if="props.item?.system_default == 1">
        <span>示例</span>
        <span>素材</span>
      </div>

      <!-- 底部操作栏遮罩 -->
      <div class="bottom_marsk mask_common" v-if="isAI && !props.viewMore">
        <span @click.stop="toView(props.item)">查看</span>
        <a-popconfirm
          title="确定删除吗?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="delItem(props.item)"
          v-if="props.item?.system_default !== 1"
        >
          <span @click.stop="() => {}" v-if="props.item?.system_default !== 1"
            >删除</span
          >
        </a-popconfirm>
      </div>

      <!-- 底部的素材时间展示 -->
      <div class="img_time" v-if="isAI && !props.viewMore">
        {{
          millisToHoursMinutesSeconds(
            props.item.scene_type == "image"
              ? props.item.end_time
              : props.item.end_time - props.item.start_time
              // : props.item.material_duration
          ) == "00:00:00"
            ? "00:00:01"
            : millisToHoursMinutesSeconds(
                props.item.scene_type == "image"
                  ? props.item.end_time
                  :props.item.end_time - props.item.start_time
                  // : props.item.material_duration
              )
        }}
      </div>
    </div>
  </template>

  <!-- 查看更多的列表 -->
  <template v-else>
    <a-popover placement="bottom" v-model:visible="popVisible" trigger="click">
      <template #content>
        <div class="more_box">
          <Cart_item
            v-for="item in props.moreList"
            :key="item.id"
            :item="item"
            @delItem="delItem(item)"
            @toView="toView(item)"
            @repaint="repaint"
            :viewMore="false"
          >
          </Cart_item>
        </div>
      </template>
      <a-tooltip placement="top">
        <template #title>
          <span>点击查看更多素材</span>
        </template>
        <div class="viewMore">
          <!-- 折叠的素材数量 -->
          <div class="more_num">+ {{ props.moreList.length }}</div>
          <!-- 图片分类 -->
          <template v-if="props.item.scene_type == 'image'">
            <!-- 不是ai图片 -->
            <template v-if="isAI">
              <img
                style="object-fit: cover; width: 100%; height: 100%"
                :src="props.item.material_url"
                alt=""
              />
            </template>
            <!-- ai 图片 -->
            <template v-else>
              <!-- ai图片 -->
              <div class="formation">
                <!-- <a-spin :spinning="props.item?.creatLoading || false" :indicator="indicator" tip="生成素材中"> -->
                <a-spin
                  :spinning="true"
                  :indicator="indicator"
                  tip="生成素材中"
                >
                  <!-- 生成中 -->
                  <div
                    style="
                      width: 100%;
                      height: 100%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <img
                      style="object-fit: cover; width: 100%"
                      v-if="props.item.material_url != ''"
                      :src="props.item.material_url"
                      alt=""
                    />
                    <!-- 生成失败 -->
                    <div
                      v-else-if="!props.item?.creatLoading"
                      style="height: 100%; width: 100%; padding-top: 44px"
                    >
                      <p
                        style="
                          text-align: center;
                          color: var(--ss-primary-color);
                        "
                      >
                        生成失败!
                      </p>
                      <div
                        style="
                          display: flex;
                          justify-content: space-between;
                          margin-top: 20px;
                          gap: 15px;
                        "
                      >
                        <a-button
                          style="width: 28px; padding: 0; margin-left: 4px"
                          type="link"
                          @click="repaint"
                          >重绘</a-button
                        >
                        <a-popconfirm
                          title="确定删除吗?"
                          ok-text="确定"
                          cancel-text="取消"
                          @confirm="delItem(props.item)"
                        >
                          <a-button
                            style="width: 28px; padding: 0; margin-right: 4px"
                            type="link"
                            @click="() => {}"
                            >删除</a-button
                          >
                        </a-popconfirm>
                      </div>
                    </div>
                  </div>
                </a-spin>
              </div>
            </template>
          </template>
          <template v-else-if="props.item.scene_type == 'video'">
            <video
              :src="item.material_url"
              style="height: 100%; width: 100%"
            ></video>
          </template>
        </div>
      </a-tooltip>
    </a-popover>
  </template>
</template>

<style lang="less" scoped>
// 修改素材生成中的样式
:deep(.ss-spin) {
  .ss-spin-text {
    width: 84px !important;
    transform: translateX(-42px);
  }
}

.item_card {
  width: 84px;
  min-width: 84px;
  height: 120px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  background-color: #000;
  margin: 0 5px;
  border: 1px solid #e6e6e6;

  &:hover {
    & .mask_common {
      opacity: 1;
    }

    & .img_time {
      opacity: 0;
    }
  }

  :deep(".ss-spin-text") {
    width: 84px;
    transform: translateX(-10px);
  }

  // 遮罩层公用样式
  .mask_common {
    height: 22px;
    width: 100%;
    padding: 0 3px;
    opacity: 0;
    transition: all 0.3s ease;
    color: #fff;
    font-size: 14px;
  }

  // 头部遮罩层
  .top_marsk {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    z-index: 1;

    .item_name {
      white-space: nowrap;
      /* 禁止换行 */
      overflow: hidden;
      /* 隐藏溢出内容 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  }

  // 示例素材文本展示
  .sample_material {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    color: red;
    font-weight: 900;
    font-size: 20px;

    & span {
      line-height: 1.2;
      font-weight: 900;
    }
  }

  // 底部遮罩层
  .bottom_marsk {
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;

    & span {
      cursor: pointer;
    }

    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  }

  // 底部时间展示
  .img_time {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    color: #fff;
    padding-left: 3px;
    font-size: 12px;
  }

  // ai图片
  .formation {
    height: 100%;
    width: 100%;
    background: #f1f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 折叠的素材列表
.more_box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  max-height: 300px;
  overflow-y: auto;
}

// 查看更多
.viewMore {
  min-width: 84px;
  width: 84px;
  height: 120px;
  border-radius: 5px;
  position: relative;
  background-color: #000;
  margin: 0 5px;
  /* 完全灰度 */
  // filter: grayscale(10%);
  opacity: 0.7;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #e6e6e6;

  .more_num {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    // color: var(--ss-primary-6);
    font-size: 20px;
    // transform: translate(-50%, -50%);

    font-weight: 900;
    background-color: rgba(0, 0, 0, 0.5);
  }

  // ai图片
  .formation {
    height: 100%;
    width: 100%;
    background: #f1f3f5;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
